<template>
  <div>
    <mt-header title="关注的医生" style="background-color: white; color: black">
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back" style="color: black"></mt-button>
      </div>
    </mt-header>

    <!-- 判断是否有就诊人 -->
    <!-- <div class="aboutContent" v-if="!tabIndex">
      <div class="logText">
        <div class="logoBox">
          <img
            class="logoimg"
            src="../../assets/imageW/guanzhu.png"
            mode="widthFix"
            alt=""
          />
        </div>
        <div class="aboutText">还没有收藏的医生</div>
      </div> 
    </div> -->

    <!-- 收藏的医生 -->
    <div class="collectList"  >
      <div class="colList" v-for="(item,index) in collList" :key="index" @click="goto(item.did)">

      <div class="top">
        <div class="ttoopp">
        <img class="doctIcon" :src="item.head" alt="">

        <div class="doctorBox">
            <div class="doname">{{item.dname}}</div>
            <div class="donamezy">{{item.lv}}</div>
        </div>
        </div>

        <div>
            <div class="doname1">{{item.name2}}</div>
            <div class="doname1">{{item.kshi}}</div>
        </div>

      </div>

        <div class="sz">{{item.strong}}</div>

        <div class="twBox">
          <div class="collBOx">
            <div class="llll">
              <img class="collIcon" src="../../assets/images/Hospital/star.png" alt="">
              <div class="numm">{{item.pingfen}}</div>
            </div>
            <div class="yyl">预约量：{{item.yuyue}}</div>
          </div>
          
            <div class="price">
              专享挂号费 <div class="dz"> {{item.price}}</div> <div style="text-decoration:line-through;">{{item.price_old}}</div>
            </div>

        </div>

    </div>
       </div>

  </div>
</template>

<script>
// import DoctorGz from '@/components/DoctorGz.vue'
// import '../../assets/js/iconfont'
    export default {
  // components: { DoctorGz },
  data() {
    return {
      tabIndex: true,
      collList:''
    }
  },
  methods:{
    goto(value){
      this.$router.push(`/doctorDetail?${value}`)
    }
  },
  mounted(){
     this.axios.get(`/ufocus_g?yhid=${this.$store.state.phone}`).then((res)=>{
          this.collList = res.data.data
        });
  },
};
</script>

<style lang="scss" scoped>
.aboutContent {
  padding: 1vh 3vh;
  box-sizing: border-box;
}
.logText {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.logoBox {
  width: 180px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 80px auto 0;
}
.logoimg {
  width: 180px;
  height: 220px;
}
.logoimg image {
  width: 100%;
}
.aboutText {
  text-align: center;
  color: black;
  letter-spacing: 2px;
  line-height: 38px;
  font-weight: 500;
}
.buttonBox {
  border-radius: 12px;
  background-color: #00d4b8;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
}
.addBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.addText {
  margin-top: 5px;
  color: white;
}
.addIcon {
  width: 24px;
  height: 24px;
  border-radius: 48px;
}
.addIcon image {
  width: 100%;
}
// 收藏
.colList{
  padding: 1vh 2vh;
  border-bottom: 1px solid #BCBCBE;
}
.doctIcon{
  border-radius: 50%;
  width: 38rpx;
  height: 38rpx;
  margin-right: 15px;
}
.top{
  // display: flex;
  align-items: center;
}
.doname{
font-weight: 600;
font-size: 18px;
margin-right: 10px;
}
.donamezy{
  font-size: 14px;
}
.doname1{
font-size: 14px;
margin: 5px 0;
padding: 0 10px;
}
.sz{
  margin: 18px 0;
  font-size: 14px;
  color: #BCBCBE;
}
.doctorBox{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.twBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collBOx{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.numm{
  color: red;
  font-size: 12px;
 margin-left: 4px;
 margin-right: 15px;
}
.yyl{
  font-size: 14px;
  color: #BCBCBE;;
}
.price{
  display: flex;
  font-size: 14px;
  align-items: center;
}
.doctIcon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.collIcon{
  width: 10px;;
  height: 10px;
}
.llll{
  display: flex;
  align-items: center;
}
.ttoopp{
  display: flex;
}
.dz{
 margin: 0 10px;
 color: red;
 font-size: 16px;
}
</style>